<template>
  <div class="features-page">
    <h1 class="page-title">功能介绍</h1>
    <div class="features-list">
      <div class="feature-item">
        <h3>1. 智能代码生成</h3>
        <p>
          通过自然语言描述您的需求，AI能够理解并生成相应的代码片段。无论是简单的函数还是复杂的算法，都能快速生成高质量的代码。
        </p>
      </div>
      <div class="feature-item">
        <h3>2. 多语言支持</h3>
        <p>
          支持Python、JavaScript、Java、C++、Go、Ruby等多种主流编程语言，满足不同开发者的需求。
        </p>
      </div>
      <div class="feature-item">
        <h3>3. 代码优化建议</h3>
        <p>
          分析您的现有代码，提供性能优化、可读性改进和最佳实践建议，帮助您提升代码质量。
        </p>
      </div>
      <div class="feature-item">
        <h3>4. 代码注释生成</h3>
        <p>
          自动为您的代码添加详细的注释，使代码更易于理解和维护。
        </p>
      </div>
      <div class="feature-item">
        <h3>5. 项目结构生成</h3>
        <p>
          不仅能生成单个文件，还能根据需求生成完整的项目结构和多个相互关联的文件。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 功能介绍页面，详细展示应用的各项功能
</script>

<style scoped>
.features-page {
  padding: 40px 20px;
}

.page-title {
  font-size: 2.5em;
  color: #1890ff;
  text-align: center;
  margin-bottom: 40px;
}

.features-list {
  max-width: 800px;
  margin: 0 auto;
}

.feature-item {
  margin-bottom: 30px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-item h3 {
  color: #1890ff;
  margin-bottom: 15px;
  font-size: 1.5em;
}

.feature-item p {
  color: #666666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2em;
  }
  
  .feature-item {
    padding: 15px;
  }
}
</style>